'use client'
import Comment from "@/app/components/comment";
import PageTitleContent from "@/app/components/pageTitleContent";
import PublicizeTitle from "@/app/components/publicizeTitle";
import lang from "@/app/i18n";
import { Button, Radio, RadioGroup,Input, Textarea } from "@nextui-org/react";
import Agree from '@/public/agree.svg'
import UnAgree from '@/public/unAgree.svg'
import Grade from "@/app/components/grade";
import FieldLayout from "@/app/components/field-layout";
const List = [
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    },
    {
        content: "找到这款 AI 神器真的帮助我提高太多效率了吧， 尤其是 一键 Agent的功能，让我做小红书文案省了不少时间，点赞👍👍",
        star: 3,
        avatar: '/avatar.png',
        nickname: "飞鹰",
        vipType: "个人高级会员",
        use: 2000,
        teamReply: '团队回复： 我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论我是产品， 感谢你的评论'
    }
]

export default function CommentPage(){
    function handleChange(e){
        console.log('e', e)
    }
    return (<div className="comment-page">
        <PublicizeTitle title={lang('Comment.title')} subTitle={lang('Comment.subTitle')}>
            <div className="overflow-x-auto mx-[30px] flex justify-center">
                <div className="Comment_list mt-[72px] flex flex-grow flex-wrap waterfall-flow-3 w-[1623px] mx-[5px] justify-center">
                    {
                        List.map((item,index)=>{
                            return <div className="comment-item mr-[28px] mb-[19px]" key={index}>
                                <Comment {...item}></Comment>
                            </div>
                        })
                    }
                </div>
            </div>
        </PublicizeTitle>
        <div className="comment-other-content mx-[32px] mt-[88px]">
            <PageTitleContent title="评论墙规则">
                <div className="comment_rule text-[14px] font-normal leading-7 mt-[10px] mb-[112px]">
                    <p>1. 我们尽量公开透明， 善意的建议评论， 无论好坏一律永不删除。</p>
                    <p>2. 我们提倡实事求是的善意表达， 准确第一，善意第二。</p>
                    <p>3. 我们会在评论墙里面定期抽奖反馈用户。</p>
                    <p>4. 我们会从评论墙里面挑选产品体验体验官，产品体验官名单会公布荣誉</p>
                    <p>5. 我们会集中处理客户反应的关键问题, 并且发布公告。</p>
                </div>
            </PageTitleContent>
            <PageTitleContent title="投票">
                <div className="vote-container mt-6 mb-[139px]">
                    <div className="vote-content flex bg-default-100 px-1 py-1">
                        <div className="vote-item flex py-2 flex-1 justify-center items-center bg-background dark:bg-default">
                            <span className="vote-text mr-2">54290 (50%)</span>
                            <Agree></Agree>
                        </div>
                        <div className="vote-item flex py-2 flex-1 justify-center items-center">
                            <span className="vote-text mr-2">54290 (50%)</span>
                            <UnAgree></UnAgree>
                        </div>
                    </div>
                    <RadioGroup label="你觉得我们的产品好用吗？" orientation="horizontal" className="mt-[24px] flex justify-center items-center">
                        <Radio value="1" className="mr-[56px]">肯定一下 👍</Radio>
                        <Radio value="2">继续加油 😂</Radio>
                    </RadioGroup>
                    <div className="button-group flex justify-center mt-[52px]">
                        <Button color="primary" radius="full" className="button px-[56px] py-[16px] text-[14px] leading-none h-auto">提交</Button>
                    </div>
                    <div className="vote-tips text-[13px] leading-4 mt-[31px] text-center">
                        温馨提示： 会员可以投票， 我们希望投票是有效且真实的能反应真实情况，会员体验过，他们反馈最真实
                    </div>
                </div>
            </PageTitleContent>
            <PageTitleContent title="参与吐槽">
                <div className="comment-form mt-[30px]">
                    <Input label="抽奖邮箱" type="email" placeholder="请输入邮箱"></Input>
                    <Textarea label="文字描述" placeholder="请输入描述， 我们希望你能认真描述" className="mt-[37px]"/>
                    <FieldLayout text={"文字描述"} className="mt-[30px]">
                        <Grade defaultValue={5} onChange={handleChange}></Grade>
                    </FieldLayout>
                    <div className="button-group flex justify-end mt-[30px]">
                        <Button color="primary" radius="full" className="button px-[56px] py-[16px] text-[14px] leading-none h-auto">确认提交</Button>
                    </div>
                </div>
            </PageTitleContent>
        </div>

    </div>)
}